<template>
	<view class="remark">
		<u-navbar
			back-text="评论"
			:background="{
				background: 'transparent'
			}"
			:border-bottom="false"
		></u-navbar>
		<view class="" v-if="remarkList.length > 0">
			<view class="remarkbox">
				<block v-for="(v, k) in remarkList" :key="k">
					<view class="remarkli">
						<view class="top u-flex u-row-between u-col-center">
							<view class="u-flex u-row-left u-col-center">
								<image :src="v.img" mode="" style="width: 98rpx;height: 98rpx;margin-right: 20rpx;"></image>
								<view class="">
									<view class="title">{{ v.username }}</view>
									<view class="time">{{ v.time }}</view>
								</view>
							</view>
						</view>
						<view class="content">{{ v.comment }}</view>
					</view>
				</block>
			</view>
		</view>
		<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center" style="margin-top: 240rpx;">
			<view class="" style="text-align: center;">
				<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
				<view class="" style="color: #919191;">暂无评论</view>
			</view>
		</view>
		<view class="botint u-flex u-row-between u-col-center">
			<u-input
				v-model="content"
				type="text"
				:clearable="false"
				:border="true"
				:custom-style="{
					backgroundColor: '#FFFFFF',
					width: '500rpx',
					height: '70rpx'
				}"
				border-color="rgba(187, 187, 187, 0.43)"
				placeholder="写评论..."
			/>
			<view class="btnint" @click="doCommentInfo">发布</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'remark',
	data() {
		return {
			id: '',
			content: '',
			remarkList: [
				// {
				// 	username: 'Kumar', //评论用户昵称
				// 	img: 'https://thirdwx.qlogo.cn/mmopen/vi_32/YeKwIpicwiauZ1NoOomvLhWslM3LINiah2KsiavvttYvxhcW215YIOh7Fh7UbTiaqjBecLZcWmcK7fj8rv8vHZu4yMQ/132',
				// 	time: '2021-01-18 16:30:02', //时间
				// 	comment: '测试评论内容' //内容
				// }
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		if (option.id) {
			this.id = option.id;
			this.getComContent(option.id);
		}
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		doCommentInfo() {
			if (this.content === '') {
				this.$refs.uToast.show({
					title: '请先输入评论!',
					type: 'error'
				});
				return;
			}
			this.$u.api
				.doCommentInfo({
					content_id: this.id,
					content: this.content
				})
				.then(res => {
					console.log(res);
					this.content = '';
					this.$refs.uToast.show({
						title: '感谢您的参与!',
						type: 'success'
					});
					this.getComContent(this.id);
				})
				.catch(err => {
					console.log(err);
				});
		},
		getComContent(id) {
			this.$u.api
				.getComContent({
					page: this.page,
					pagesize: 20,
					content_id: id
				})
				.then(res => {
					console.log(res);
					this.remarkList=res.data.data;
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.remark {
	.remarkli {
		background-color: #ffffff;
		padding: 26rpx 34rpx;
		border-radius: 12rpx;
		margin: 36rpx 20rpx 0 20rpx;
		.top {
			.title {
				color: #101010;
				font-size: 28rpx;
			}
			.time {
				color: #919191;
				font-size: 24rpx;
			}
			.copy {
				width: 178rpx;
				height: 54rpx;
				line-height: 54rpx;
				background-color: rgba(249, 93, 78, 0.37);
				color: #f95d4e;
				border-radius: 60rpx;
				text-align: center;
			}
		}
		.content {
			margin-top: 26rpx;
			// min-height: 208rpx;
			color: #404040;
			font-size: 24rpx;
		}
	}
	.botint {
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0 14rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/deep/.u-input {
			background-color: #ffffff;
		}
		.btnint {
			width: 158rpx;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #f95d4e;
			color: #ffffff;
			font-size: 26rpx;
			text-align: center;
			box-shadow: 0 4rpx 12rpx 0 rgb(249, 130, 78);
			border-radius: 40rpx;
			margin-left: 20rpx;
		}
	}
}
</style>
